<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Problems</title>
  <!-- <link rel="stylesheet" type="text/css" href="/lib/semantic-ui/semantic.min.css" /> -->
  <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
  <!-- <script src="/lib/jquery-3.2.1.min.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- <script src="/lib/semantic-ui/semantic.min.js"></script> -->
  <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.js"></script>
  <!-- <script src="/lib/vue.js"></script> -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <!-- <script src="/lib/axios.min.js"></script> -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="/js/util.js"></script>
  <script src="/js/components.js"></script>


</head>

<body>

  <div id="app">
    <my-header v-bind:userinfo='userinfo'></my-header>
    <div class="ui main container">
      <h1 class="ui header" style="color:transparent">UI</h1>
      <view-loader v-if='loading'></view-loader>
      <view-404 v-if='is404'></view-404>
      <!-- viewdata开始 -->
      <template v-if='!loading &amp;&amp; !is404'>
        <div class="ui breadcrumb">
          <i class="angle right icon"></i>
          <a class="section" :href="referer" v-if="object0.referer!=null">{{ object0.referer }}</a>
          <div class="divider" v-if="object0.referer!=null"> / </div>

          <div class="active section">{{ object0.title }}</div>
        </div>

        <h1 class="ui header">
          {{ object0.title }}</h1>


        <div class="ui grid">

          <div class="ui twelve wide column">
            <div>
              <p style="line-height: 180%" v-html="object0.description">
              </p>
            </div>
            <h4>样例输入</h4>
            <div class="ui segment" v-html="object0.inputExample">

            </div>

            <h4>样例输出</h4>
            <div class="ui segment" v-html="object0.outputExample">

            </div>
          </div>

          <div class="ui four wide column">
            <table class="ui celled structured striped table">
              <tbody>
                <tr>
                  <td>
                    <i class="microchip icon"></i> 内存限制 {{ object0.memoryLimit }}M
                  </td>
                </tr>
                <tr>
                  <td>
                    <i class="wait icon"></i> 时间限制 {{ object0.timeLimit }}ms</td>
                </tr>
                <tr>
                  <td>
                    <i class="unhide icon"></i> 浏览 {{ object0.viewerNum==null?0:object0.viewerNum }}</td>
                </tr>
                <tr>
                  <td>
                    <i class="check circle icon"></i> 正确 {{ object0.acceptNum==null?0:object0.acceptNum }}</td>
                </tr>
                <tr>
                  <td>
                    <i class="sticky note icon"></i> 提交 {{ object0.submitNum==null?0:object0.submitNum }}</td>
                </tr>

                <tr>
                  <td>
                    <i class="percent icon"></i>通过率 {{ (object0.acceptNum*100/object0.submitNum).toFixed(1) }}%</td>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
      </template>
      <!--viewdata结束-->

      <!-- viewsubmit开始 -->
      <template v-if='!loading &amp;&amp; !is404'>
        <h1>提交</h1>
        <!-- <i class="code icon"></i> -->
        <div class="ui selection dropdown">
          <input type="hidden" name="language" />
          <i class="dropdown icon"></i>
          <div class="default text">选择语言</div>
          <div class="menu">
            <div class="item" data-value="0">C</div>
            <div class="item" data-value="1">C++</div>
            <div class="item" data-value="2">Java</div>
            <div class="item" data-value="3">Python</div>
            <div class="item" data-value="4">Ruby</div>
            <div class="item" data-value="5">Go</div>
            <div class="item" data-value="6">Perl</div>
          </div>
        </div>

        <div class="ui form">
          <div class="field">
            <label></label>
            <textarea v-model="src" rows="10"></textarea>
          </div>
        </div>

        <button class="ui primary button" style="margin-top:0.5em" v-on:click="submit" v-bind:class="{ loading: posting }">提交 </button>

        <div v-if="object1.code==1" class="ui info message">
          <i class="close icon" v-on:click="closeMessage"></i>
          <div class="header">成功</div>
          <p>{{object1.msg}}</p>
        </div>

        <div v-if="object1.code==0" class="ui warning message">
          <i class="close icon" v-on:click="closeMessage"></i>
          <div class="header">失败</div>
          <p>{{object1.msg}}</p>
        </div>
      </template>
      <!-- viewsubmit结束 -->

    </div>

    <auth-modal v-bind:errorinfo='errorinfo'></auth-modal>
    <my-footer></my-footer>

  </div>



  <!-- 放到下拉栏下面 -->
  <script>$('.ui.dropdown').dropdown();</script>


  <script>

    var ld = {
      object0: {},
      referer: document.referrer,
      src: '',
      userinfo: {},
      posting: false,
      object1: {},
      loading: true,
      is404: false,
      errorinfo: {
        type: 0,
        msg: ''
      }
    };

    var pathId = getPathId();
    var dataApi = '/api/p/' + pathId;
    var submitApi = '/api/s';

    axios.get('/api/u/info', {
      headers: { 'Access-Token': window.localStorage.getItem('token') }
    })
      .then(function (response) {
        ld.userinfo = response.data.data
      })
      .catch(function (error) {
        if (/50\d/.test(error.response.status)) {
          ld.errorinfo.type = 500;
        } else {
          ld.errorinfo.type = 400;
          ld.errorinfo.msg = error.response.data.msg;
        }
        $('.ui.basic.modal').modal('show');
        $(":root").delay(3000).queue(function () {
          $('.ui.basic.modal').modal('hide');
          window.location.href = "/login";
        });
      })


    axios.get(dataApi, {
      headers: {
        'My-Referer': ld.referer,
        'Access-Token': window.localStorage.getItem("token")
      }
    })
      .then(function (response) {
        //TODO 系統異常處理
        ld.object0 = response.data.data;
        ld.object0.description = ld.object0.description.replace(/\r?\n/g, '<br/>')
        ld.object0.inputExample = ld.object0.inputExample.replace(/\r?\n/g, '<br/>')
        ld.object0.outputExample = ld.object0.outputExample.replace(/\r?\n/g, '<br/>')
        ld.loading = false
      })
      .catch(function (error) {
        if (error.response) {
          if (error.response.status === 404) {
            ld.loading = false
            ld.is404 = true
          } else {
            console.log(error.response.status);
          }
        }

      });


    var vm = new Vue({
      el: '#app',
      data: ld,
      methods: {
        submit: function () {
          this.posting = true;
          axios({
            url: submitApi,
            method: 'post',
            headers: { 'Access-Token': window.localStorage.getItem("token") },
            data: {
              problemId: ld.object0.id,
              src: ld.src,
              lang: 'java'
            }
          })
            .then(function (response) {
              vm.posting = false;
              vm.object1 = response.data;
            });
        },
        closeMessage: function(){
          vm.object1 = {}
        }
      }
    })


  </script>
</body>

</html>